<template>
	<el-menu default-active="2"
					style="height:100%;"
					:class="menuStyle=='horizontal'? 'el-menu-vertical':''"
					:mode="menuStyle"
					:ellipsis="false"
					:router="true"
					background-color="#f5f8ff"
					@open="handleOpen"
					@close="handleClose">
		<div class="pd-l-20"
				v-if="menuStyle=='horizontal'" />
		<el-menu-item index="logo" v-if="device!='MOBILE'"
									style="padding:0px;">
			<sys-logo v-show="menuStyle=='horizontal'" />
			<el-affix v-show="menuStyle!='horizontal'"
								:offset="0"
								style="width:100%;">
				<sys-logo style="background-color: #f5f8ff;" />
			</el-affix>
		</el-menu-item>
		<div class="flex-grow"
				v-if="menuStyle=='horizontal'" />
		<el-menu-item index="/">
			<el-icon><span class="iconfont">&#xe6cb;</span></el-icon>
			<span>首页</span>
		</el-menu-item>
		<el-menu-item index="/EditOR">
			<el-icon><span class="iconfont">&#xe622;</span></el-icon>
			<span>编辑器</span>
		</el-menu-item>
		<el-sub-menu index="1">
			<template #title>
			<el-icon><span class="iconfont">&#xe639;</span></el-icon>
				<span>示例合集</span>
			</template>
			<el-menu-item index="/Examples/ExampleSpan">
			<el-icon><span class="iconfont">&#xebc2;</span></el-icon>
				<span>图例展示</span>
			</el-menu-item>
			<el-menu-item index="/Examples/ExampleList">
			<el-icon><span class="iconfont">&#xea39;</span></el-icon>
				<span>效果列表</span>
			</el-menu-item>
		</el-sub-menu>
		<el-menu-item index="/AboutSys">
			<el-icon><span class="iconfont">&#xe619;</span></el-icon>
			<span>关于</span>
		</el-menu-item>
	</el-menu>
</template>
<script>
import { mapState } from 'vuex';
import SysLogo from '@/components/SysLogo/index.vue'
export default {
	name: 'SysMenu',
	props: {
		menuStyle: {
			required: false, // 是否必传
			type: String, // 类型
			default: 'vertical' // 默认值
		}
	},
	components: {
		SysLogo
	},
	computed: mapState({
		device: state => state.appStore.device,
	}),
	methods: {
		handleOpen (key, keyPath) {
			console.info(this.menuStyle);
			console.log(key, keyPath)
		},
		handleClose (key, keyPath) {
			console.log(key, keyPath)
		}
	}
};
</script>
<style scoped>
.el-menu-vertical {
	height: 60px;
}
.pd-l-20 {
	padding-left: 20px;
}
.flex-grow {
	flex-grow: 1;
}
</style>